<template>
    <div>
        <Row>
            <Card style="width:350px;margin-bottom:5px">
                <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    info
                </p>
                <p><span class="desc">cluster_state: </span>{{ cluster_info.cluster_state}}</p>
                <p><span class="desc">cluster_slots_assigned:</span> {{ cluster_info.cluster_slots_assigned}}</p>
                <p><span class="desc">cluster_slots_ok:</span> {{ cluster_info.cluster_slots_ok}}</p>

                <p><span class="desc">cluster_slots_pfail:</span> {{ cluster_info.cluster_slots_pfail}}</p>
                <p><span class="desc">cluster_slots_fail:</span> {{ cluster_info.cluster_slots_fail}}</p>
                <p><span class="desc">cluster_known_nodes:</span> {{ cluster_info.cluster_known_nodes}}</p>
                <p><span class="desc">cluster_size:</span> {{ cluster_info.cluster_size}}</p>
                <p><span class="desc">cluster_current_epoch:</span> {{ cluster_info.cluster_current_epoch}}</p>
                <p><span class="desc">cluster_stats_messages_ping_sent:</span> {{ cluster_info.cluster_stats_messages_ping_sent}}</p>
                <p><span class="desc">cluster_stats_messages_pong_sent:</span> {{ cluster_info.cluster_stats_messages_pong_sent}}</p>
                <p><span class="desc">cluster_stats_messages_update_sent:</span> {{ cluster_info.cluster_stats_messages_update_sent}}</p>
                <p><span class="desc">cluster_stats_messages_sent:</span> {{ cluster_info.cluster_stats_messages_sent}}</p>
                <p><span class="desc">cluster_stats_messages_ping_received:</span> {{ cluster_info.cluster_stats_messages_ping_received}}</p>
                <p><span class="desc">cluster_stats_messages_pong_received:</span> {{ cluster_info.cluster_stats_messages_pong_received}}</p>
                <p><span class="desc">cluster_stats_messages_received:</span> {{ cluster_info.cluster_stats_messages_received}}</p>
            </Card>
        </Row>
        <Row>
            <Card>
                <p slot="title">
                    <Icon type="ios-film-outline"></Icon>
                    node
                </p>
                <i-table size="default"   border stripe  :columns="format" :data="show_list" height="350">
                    <!-- <template slot-scope="{ row, index }" slot="action">
                        <Button  size="default"  type="error" style="margin-bottom: 5px "  @click="del_xx(index)">删除</Button>
                    </template> -->
                </i-table >
            </Card>
        </Row>
        <!-- <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" @on-page-size-change="changePageSize" show-total show-sizer/>
        </div> -->
    </div>
</template>
<script>
import { post } from  '@/api/http'
import { get_cluster_nodes,get_cluster_info } from  '@/api'

export default {
    data() {
        return {
            format: [
                {
                    title: '唯一标识',key: 'id'
                },
                {
                    title: '主机地址',key:'address'
                },
                {
                    title: '角色',key: 'flags',
                    render: (h, params) => {
                        let flags = params.row.flags
                        if (flags.indexOf('master') !=-1){
                             return h('span',{
                                style: {
                                    color: '#ed4014'
                                }
                            },'master')
                        }else {
                            return h('span',{
                                style: {
                                    color: '#19be6b',
                                }
                            },'slave')
                        }
                    }
                },
                {
                    title: '主节点',key: 'master',
                    render: (h,params) => {
                        let master = params.row.master
                        if (master!=null){
                            let addr = this.get_master_addr_by_id(master)
                            return h('span',addr)
                        }
                    }
                },
                {
                    title: 'node.epoch',key: 'node-epoch'
                },
                {
                    title: '状态',key: 'state'
                },
                {
                    title: '插槽',key: 'slots',
                },
                {
                    title: '插槽数量',key:'slot-count'
                },
            ],
            // 集群信息
            cluster_info: null,
            // 分页
            show_list: [],
            total: 0,
            pageSize: 10,
            page: 1,
        }
    },
    methods: {
        get_master_addr_by_id(id){
            let addr = "unknown"
            for(let i=0;i<this.show_list.length;i++){
                let node = this.show_list[i]
                if(node.id==id){
                    addr = node.address
                    break
                }
            }
            return addr
        },
        refresh() {
            post(get_cluster_info).then(response =>{
                this.cluster_info = response.data
            }),
            post(get_cluster_nodes).then(response =>{
                let data = response.data
                this.show_list = data
            })
        }

    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>
    /* .desc {
        background: red;
    } */
    pre{
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>